<template>
  <div class="container" v-loading="isLoading">
    <el-card>

      <template #header>
        <div class="table_tool">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="showAddOrEdit = true"
            >新增</el-button
          >
        </div>
      </template>

      <el-table :data="tableData" border>
        <el-table-column prop="name" label="商品名称" />
        <el-table-column prop="goods_type_name" label="商品分类" />
        <el-table-column prop="banner" label="缩略图">
          <template #default="{ row }">
            <el-image
              style="width: 160px; height: auto"
              :src="row.banner"
              :preview-src-list="[row.banner]"
            />
          </template>
        </el-table-column>

        <el-table-column prop="stock" label="库存" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <span v-if="row.status==='1'">上架</span>
            <span class="red" v-else>下架</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="所需积分" />
        <el-table-column prop="summary" label="商品描述" show-overflow-tooltip />
        <el-table-column label="操作" width="120px" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="openEdit(row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              class="red"
              @click="delConsultById(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="searchForm.page_size"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>

     <el-dialog
      :title="(builingForm.$id ? '编辑' : '新增') + '积分商品'"
      :visible.sync="showAddOrEdit"
      width="888px"
      @closed="closeDialog"
    >
      <el-form
        :model="builingForm"
        ref="builingForm"
        label-width="5em"
      >
        <el-form-item prop="$id" hidden />
        <el-form-item class="span-2" label="商品名" prop="name">
          <el-input v-model="builingForm.name" placeholder="请输入商品名称" />
        </el-form-item>

        <el-form-item class="span-2" label="商品分类" prop="goods_type_id">
          <el-select v-model="builingForm.goods_type_id" placeholder="请选择分类">
            <el-option
              v-for="(oVal, oIdx) of goodsType"
              v-bind="oVal"
              :key="oIdx"
            />
          </el-select>
        </el-form-item>

        <el-form-item class="span-2" label="状态" prop="status">
          <el-select v-model="builingForm.status" placeholder="请选择状态">
            <el-option
              v-for="(oVal, oIdx) of statusType"
              v-bind="oVal"
              :key="oIdx"
            />
          </el-select>
        </el-form-item>

        <el-form-item class="span-2" label="库存" prop="stock">
          <el-input
            v-model.number="builingForm.stock"
            placeholder="请输入库存"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="所需积分" prop="price">
          <el-input
            v-model.number="builingForm.price"
            placeholder="请输入所需积分"
          ></el-input>
        </el-form-item>

        <el-form-item label="图片" prop="banner">
          <Upload
            v-model="builingForm.banner"
            :file.sync="builingForm.banner"
          />
        </el-form-item>

        <el-form-item label="商品描述" prop="summary">
          <el-input
            v-model="builingForm.summary"
            type="textarea"
            row="6"
            placeholder="请输入商品描述"
          ></el-input>
        </el-form-item>

      </el-form>

      <template #footer>
        <el-button
          type="primary"
          @click="submitData()"
          :loading="loading.update"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script>
import API from '@/api';
import { table, addOrEdit, status } from "@/utils/mixins";
import Upload from "@/components/Upload/SingleImage.vue";
export default {
  mixins: [table, addOrEdit, status],
  components: {
    Upload,
  },
  data: () => ({
    isLoading:true,
    showAddOrEdit:false,//查看详情弹窗
    fullscreenLoading: false,//全局loading
    tableData:[],
    searchForm: {
      page:1,
      per_page:10,
    },
    builingForm: {
      $id:"",
      name:"",
      goods_type_name:1,
      status:"1",
      stock:"",
      price:"",
      banner:"",
      summary:''
    },
    goodsType:[
    ],
    statusType:[
      {label:'上架',value:"1"},
      {label:'下架',value:"0"},
    ]
  }),


  created() {
    API.getIntegralGoodType(this.searchForm)
        .then(({data}) => {
          let type=data.map(item=>{
            return {label:item.name,value:item.id}
          })
          this.goodsType=type
        }).catch((err) => {
        }).finally(() =>{
        })
    this.getList()
  },


   methods: {
    // 获取商品列表
    getList(){
      this.isLoading=true
      API.getIntegralGoodsList(this.searchForm)
      .then(({ data })=>{
        this.tableData=data.items
        this.tableTotal=data.total
      })
      .catch()
      .finally(()=>{
        this.isLoading=false
      })
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getList()
    },

    openEdit(obj){
      console.log(obj.goods_type_id)
      this.builingForm.$id=obj.id,
      this.builingForm.name=obj.name,
      this.builingForm.goods_type_id=obj.goods_type_id,
      this.builingForm.status=obj.status,
      this.builingForm.stock=obj.stock,
      this.builingForm.price=obj.price,
      this.builingForm.banner=obj.banner,
      this.builingForm.summary=obj.summary
      this.showAddOrEdit=true
    },


    submitData(){
      let _that=this
      let data={
        name:this.builingForm.name,
        banner:this.builingForm.banner,
        price:this.builingForm.price,
        stock:this.builingForm.stock,
        status:this.builingForm.status,
        goods_type_id:this.builingForm.goods_type_id,
        summary:this.builingForm.summary,
      }
      let id=this.builingForm.$id
      if(id){
        API.editIntegralGoods(id,data).then(()=>{
          this.$message.success("编辑成功！");
        }).catch(()=>{}).finally(()=>{
          _that.getList()
          _that.closeDialog()
        })
      }else{
        API.addIntegralGoods(data).then(()=>{
          this.$message.success("新增成功！");
        }).catch(()=>{}).finally(()=>{
          _that.getList()
          _that.closeDialog()
        })
      }
    },

    // 删除
    delConsultById(id){
      let _that=this
      this.$confirm(`是否删除改条数据？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
      .then(() => {
        API.delIntegralGoods(id)
        .then(({data}) => {
        }).catch((err) => {
        }).finally(() =>{
          _that.getList()
        })
      })
      .catch(() => {
      });
    },

    // 关闭弹窗
    closeDialog(){
      this.restForm()
      this.showAddOrEdit=false
    },

    restForm(){
      let _that=this
      _that.builingForm.$id=""
      _that.builingForm.name=""
      _that.builingForm.goods_type_id="1"
      _that.builingForm.status="1"
      _that.builingForm.stock=""
      _that.builingForm.price=""
      _that.builingForm.banner=""
      _that.builingForm.summary=""
    },


  },
};
</script>

<style lang="scss" scoped></style>



